<template>
	<view :style="{height:screenHeight+'px'}" class="addNewFriend">
		<view class="search">
			<uni-search-bar 
				cancelButton="none" 
				v-model="keywords"
				@focus="navTo('/pages/book/addNewFriend/searchUser')"
				placeholder="通过手机号/钉钉号/邮箱搜索添加">
			</uni-search-bar>
		</view>
		
		<view class="mobile-contacts">
			<uni-icons type="contact" color="#0080FF" size="50"></uni-icons>
			<view class="text">
				添加手机联系人
			</view>
		</view>
		
		<view class="new-friend-request">
			新的好友请求
		</view>
		<view class="request-list" v-for="user in userList" :key="user.id">
			<view class="user-body" >
				<view class="friendVo" @click="navTo('/pages/book/addNewFriend/friendRequest',user.fid)">
					<!-- 头像 -->
					<view class="avatar">
						<u-avatar
							size="45"
							:text="getAvatar(user)"
							shape="square" 
							bg-color="#0080FF"
							font-size='15'
							:src="user.avaUrl">
						</u-avatar>
					</view>
					<view class="info">
						<view class="info-name">
							{{user.userName}}
						</view>
						<view class="info-school">
							{{user.school}}<uni-icons type="auth-filled" color="#0080FF"></uni-icons>
						</view>
						<view class="info-remarks">
							{{user.remarks}}
						</view>
					</view>
				</view>
			
				<!-- 点击接受, 直接同意好友请求，并且路由到好友请求页面 -->
				<view class="accept-bt">
					<button @click="passAdd(user)" >接受</button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: "",
				keywords:'',
				userList:[],
			}
		},
		onLoad() {
			let _this = this;
			let token = uni.getStorageSync('token')
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
			uni.request({
				url:"http://localhost:8090/nailCampus/friend/getAllAddMessage",
				header:{
					'token':token
				},
				success(res) {
					_this.userList = res.data.data;
					console.log(_this.userList);
				}
			})
		},
		methods: {
			getAvatar(user){
				let text = '';
				if(user.avaUrl == null|| user.avaUrl.length == 0){
					text = user.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},
			navTo(url,id){
				uni.navigateTo({
					url:url+'?id='+id
				})
			},
			passAdd(friend){
				uni.request({
					url:"http://localhost:8090/nailCampus/friend/passAdd",
					method:'POST',
					data:friend,
					success() {
						uni.navigateTo({
							url:'/pages/book/addNewFriend/friendRequest?id='+friend.fid+'&&isFlag='+1
						});
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.addNewFriend{
		background-color: #F1F1F3;
		.search{
			background-color: white;
		}
		.mobile-contacts{
			margin-top: 2%;
			padding-top: 2%;
			height: 15%;
			background-color: #FFFFFF;
			
			::v-deep .uni-icons{
				margin-left: 40%;
			}
			.text{
				padding-top: 2%;
				margin-left: 35%;
				color: #969696;
			}
		}
		
		.new-friend-request{
			margin-top: 4%;
			margin-left: 2%;
			color:#B3B3B5 ; 
			margin-bottom: 2%;
		}
		.user-body{
			padding-top: 2%;
			padding-bottom: 2%;
			display: flex;
			background-color: white;
			border-bottom: 1rpx solid #F1F1F3;
			.friendVo{
				width: 80%;
				display: flex;
				.avatar{
					margin-left: 2%;
				}
				.info{
					width: 60%;
					margin-left: 3%;
					// border: 1rpx solid red;
					.info-name{
						font-size: 30rpx;
						font-weight: 600;
						letter-spacing: 2rpx;
					}
					.info-school{
						margin-top: 1%;
						font-size: 25rpx;
						letter-spacing: 2rpx;
						color: #0080FF;
					}
					.info-remarks{
						margin-top: 1%;
						font-size: 25rpx;
						letter-spacing: 2rpx;
						color: #999999;
					}
			}
		
			}
			.accept-bt{
				margin-top: 2%;
				width: 100rpx;
				height: 30rpx;
				button{
					border: 1rpx solid #d9d9d9;
					background-color: white;
					padding: 0rpx;
					letter-spacing: 2rpx;
					font-size: 25rpx;
				}
				button::after{
					border:none
				}
				
			}
		}
		.user-body:active{
			background-color: #d0d0d0;
		}
	}
</style>
